<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <link rel="stylesheet" href="css/2_style.css">
</head>
<body>

<!--
  4.CSS选择器分类:
    1)*:匹配html中所有元素(注意:*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用)
    2)标签选择器:用来匹配对应的标签
    3)类选择器:用来选择class命名的标签
    4)ID选择器:用来选择用id命名的标签
    5)派出选择器:根据上下文来确定选择的标签
    6)伪类选择器(后面学)
  5.选择器的分组级继承
  6.样式权重
    ！important(10000) > 内联样式（1000） > id选择器（100） 》 类，伪类选择器（10） 》 标签选择器（1）
  7.css 字体
    1)font-size:字号
    2)font-family: 字体
    3)font-style: 样式
    4)font-weight： 加粗
    5)line-height: 行高
    6)color: 颜色
    7)text-decoration: 文字修饰
    8)text-align: 文本对齐风湿
    9)text-transform: 字母大小写
    10)text-indent: 文本缩进

    9.CSS背景
      1)background-color:背景色(transparent/color)
      2)background-image:背景图(none/ur1)
      3)background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
      4)background-position:设置对象的背景图像位置({x-number|top|center|bottom}{y-number|left|center|right})
      5)background-attachment:背景图像滚动位置(scroll/fixed)
      6)background

   10.CSS伪类选择器 伪类:专门用来表示元素的一种特殊状态。常用伪类选择器:
      1)a标签的伪类:
          :link/:visited/:hover/:active
      2):focus 获得焦点
      3):first-child/:last-child/:nth-child(number)

    11.属性选择器
        [属性名]:包含有指定属性名的元素
        [属性名=值]:属性名的值为指定值的元素
        [屆性名~=值]:属性名的值包含指定值的元素
        [属性名~=值]:属性名的值以指定值的开头的元素
        [属性名$=值]:属性名的值以指定值的结尾的元素
    12.关系选择器
        1)空格:后代选择器
        2)>:只选择儿子元素
        3)+:兄弟选择
    13.元素&伪类的特点:
      1)伪元素和伪类都不会出现在源文档或者文档树中
      2)伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
      3)伪元素名和伪类名都是大小写不敏感的
      4)有些伪类是互斥的，而其它的可以同时用在一个元素上。(在规则冲突的情况下，常规层叠顺序决定结果)
      常用伪元素
        before/:after/:first-letter/:first-line :前面可以是1个冒号也可以是双冒号3)
        ::selection/::placeholder/::backdrop:前面只能是双冒号
-->
  <div>
    测试
  </div>

  <p>标签选择器</p>

  <div class="test"> 类选择器</div>

  <div id="id_test"> ID选择器</div>

<ul class="ul1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<!--排除选择器-->
<ul class="ul2">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <ol>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  <ol/>
</ul>

</body>
</html>